<template>
  <div class="reset-pwd">
    <div class="form-section">
      <el-form
        ref="form"
        :model="user"
        :rules="rules"
        class="custom-form"
        label-position="top"
      >
        <el-form-item label="当前密码" prop="oldPassword">
          <div class="input-wrapper">
            <i class="el-icon-lock"></i>
            <el-input
              v-model="user.oldPassword"
              placeholder="请输入当前密码"
              show-password
              type="password"
            />
          </div>
        </el-form-item>

        <el-form-item label="新密码" prop="newPassword">
          <div class="input-wrapper">
            <i class="el-icon-key"></i>
            <el-input
              v-model="user.newPassword"
              placeholder="请输入新密码"
              show-password
              type="password"
            />
          </div>
          <div v-if="user.newPassword" class="password-strength">
            <div class="strength-label">密码强度：<span :class="strengthClass" class="strength-text">{{
                strengthText
              }}</span></div>
            <div class="strength-meter">
              <div
                :class="strengthClass"
                :style="{ width: passwordStrength + '%' }"
                class="strength-bar"
              ></div>
            </div>
          </div>
        </el-form-item>

        <el-form-item label="确认新密码" prop="confirmPassword">
          <div class="input-wrapper">
            <i class="el-icon-check"></i>
            <el-input
              v-model="user.confirmPassword"
              placeholder="请再次输入新密码"
              show-password
              type="password"
            />
          </div>
        </el-form-item>

        <div class="form-actions">
          <button class="btn btn-primary" @click="submit">
            <i class="el-icon-check"></i> 保存
          </button>
        </div>
      </el-form>
    </div>
  </div>
</template>

<script>
import {updateUserPwd} from "@/api/system/user";

export default {
  data() {
    const equalToPassword = (rule, value, callback) => {
      if (this.user.newPassword !== value) {
        callback(new Error("两次输入的密码不一致"));
      } else {
        callback();
      }
    };
    return {
      user: {
        oldPassword: '',
        newPassword: '',
        confirmPassword: ''
      },
      // 表单校验
      rules: {
        oldPassword: [
          {required: true, message: "当前密码不能为空", trigger: "blur"}
        ],
        newPassword: [
          { required: true, message: "新密码不能为空", trigger: "blur" },
          { min: 6, max: 20, message: "长度在 6 到 20 个字符", trigger: "blur" },
          {pattern: /^[^<>"'|\\]+$/, message: "不能包含非法字符：< > \" ' \\ |", trigger: "blur"}
        ],
        confirmPassword: [
          { required: true, message: "确认密码不能为空", trigger: "blur" },
          {validator: equalToPassword, trigger: "blur"}
        ]
      }
    };
  },
  computed: {
    passwordStrength() {
      const password = this.user.newPassword || '';
      if (!password) return 0;

      let strength = 0;

      // 长度检查
      if (password.length >= 6) strength += 20;
      if (password.length >= 10) strength += 10;

      // 包含数字
      if (/\d/.test(password)) strength += 20;

      // 包含小写字母
      if (/[a-z]/.test(password)) strength += 20;

      // 包含大写字母
      if (/[A-Z]/.test(password)) strength += 20;

      // 包含特殊字符
      if (/[^a-zA-Z0-9]/.test(password)) strength += 20;

      return Math.min(strength, 100);
    },
    strengthClass() {
      const strength = this.passwordStrength;
      if (strength < 40) return 'weak';
      if (strength < 70) return 'medium';
      return 'strong';
    },
    strengthText() {
      const strength = this.passwordStrength;
      if (strength < 40) return '弱';
      if (strength < 70) return '中';
      return '强';
    }
  },
  methods: {
    submit() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
            this.$modal.msgSuccess("密码修改成功");
            this.resetForm();
          });
        }
      });
    },
  }
};
</script>

<style lang="scss" scoped>
.reset-pwd {
  display: flex;
  gap: 20px;

  .form-section {
    flex: 1;
    min-width: 0;

    .custom-form {
      max-width: 500px;

      ::v-deep .el-form-item__label {
        padding-bottom: 6px;
        line-height: 1;
        font-size: 13px;
        color: #606266;
        font-weight: 500;
      }

      .input-wrapper {
        position: relative;

        i {
          position: absolute;
          left: 10px;
          top: 50%;
          transform: translateY(-50%);
          color: #909399;
          z-index: 1;
          font-size: 14px;
        }

        ::v-deep .el-input__inner {
          padding-left: 32px;
          height: 36px;
          border-radius: 4px;
          border: 1px solid #dcdfe6;
          transition: all 0.2s;

          &:hover, &:focus {
            border-color: #409EFF;
          }
        }
      }

      .password-strength {
        margin-top: 8px;

        .strength-label {
          font-size: 12px;
          color: #909399;
          margin-bottom: 4px;
        }

        .strength-meter {
          height: 4px;
          background-color: #e4e7ed;
          border-radius: 2px;
          overflow: hidden;

          .strength-bar {
            height: 100%;
            transition: all 0.2s;

            &.weak {
              background-color: #f56c6c;
            }

            &.medium {
              background-color: #e6a23c;
            }

            &.strong {
              background-color: #67c23a;
            }
          }
        }

        .strength-text {
          font-size: 12px;
          margin-top: 4px;
          text-align: right;

          &.weak {
            color: #f56c6c;
          }

          &.medium {
            color: #e6a23c;
          }

          &.strong {
            color: #67c23a;
          }
        }
      }

      .form-actions {
        margin-top: 24px;
        display: flex;
        gap: 12px;

        .btn {
          height: 36px;
          border-radius: 4px;
          padding: 0 16px;
          font-size: 13px;
          font-weight: 500;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.2s;
          border: none;

          i {
            margin-right: 6px;
            font-size: 14px;
          }

          &.btn-primary {
            background-color: #409EFF;
            color: #fff;

            &:hover {
              background-color: #66b1ff;
            }
          }

          &.btn-default {
            background-color: #f5f7fa;
            color: #606266;
            border: 1px solid #dcdfe6;

            &:hover {
              background-color: #e9ebef;
            }
          }
        }
      }
    }
  }

  .tips-section {
    width: 250px;
    flex-shrink: 0;

    .tips-card {
      background-color: #f9f9f9;
      border-radius: 4px;
      border: 1px solid #eee;
      overflow: hidden;

      .tips-header {
        padding: 12px;
        background-color: #f2f6fc;
        display: flex;
        align-items: center;

        i {
          color: #409EFF;
          font-size: 14px;
          margin-right: 6px;
        }

        span {
          color: #333;
          font-weight: 500;
          font-size: 13px;
        }
      }

      .tips-body {
        padding: 12px;

        .tip-item {
          display: flex;
          margin-bottom: 8px;

          &:last-child {
            margin-bottom: 0;
          }

          i {
            color: #67c23a;
            margin-right: 6px;
            margin-top: 3px;
            flex-shrink: 0;
            font-size: 12px;
          }

          span {
            color: #606266;
            font-size: 12px;
            line-height: 1.5;
          }
        }
      }
    }
  }
}

@media screen and (max-width: 992px) {
  .reset-pwd {
    flex-direction: column;

    .tips-section {
      width: 100%;
      max-width: 500px;
    }
  }
}

@media screen and (max-width: 768px) {
  .form-actions {
    flex-direction: column;

    .btn {
      width: 100%;
    }
  }
}
</style>
